<script lang="ts" setup>
import { getRepayment, loanOrderList, repayment, repaymentData } from '@/api/user'
import ImageUpload from '@/components/ImageUpload.vue'

defineOptions({
  name: 'ReimburseList',
})
const userTel = ref('')
const isCs = ref(false)
const repaymentQuery = reactive({
  is_pay: '-1',
  start_date: '',
  end_date: '',
  page: 1,
  size: 999,
})
const repaymentList = ref([])
// 步骤列表配置
const stepList = ref([
  { title: '运营长审核' },
  { title: '财务审核' },
  { title: '财务放款' },
  // { title: '已完结' }
])

// 配资申请列表数据
const loanList = ref([])

// 还款列表
const repayList = ref([])

// 汇总数据
const summaryData = ref({
  total: 0,
  interest: 0,
  principal: 0,
})

// 过滤后的列表
// const filteredList = computed(() => {
//   let filtered = loanList.value.filter(item => item.status === activeTab.value)

//   if (searchKeyword.value) {
//     filtered = filtered.filter(item =>
//       item.name.includes(searchKeyword.value) ||
//       item.phone.includes(searchKeyword.value)
//     )
//   }
//   return filtered
// })

// 格式化金额
function formatAmount(amount: number) {
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })
}

// 计算当前步骤
function getCurrentStep(item) {
  // 根据审核状态确定当前步骤
  if (item.payment_time) {
    return 3 // 财务已放款
  }
  else if (item.finance_audit === 1) {
    return 2 // 待财务放款
  }
  else if (item.finance_audit === -2) {
    return -2 // 财务审核拒绝
  }
  else if (item.loan_audit === 1) {
    return 1 // 待财务审核
  }
  else if (item.loan_audit === -2) {
    return -1 // 运营长审核拒绝
  }
  else {
    return 0 // 待运营长审核
  }
}

// 获取还款方式文本
const getRepaymentMethodText = {
  1: '分期还款',
  2: '利润分成',
}
function getOrderList() {
  loanOrderList({
    page: 1,
    size: 9999,
    repayment_tp: 0,
    keyword: '',
  }).then((res) => {
    console.log(res, '88888888888');

    loanList.value = res.list.filter(item => !item.payment_time)
    repayList.value = res.list.filter(item => item.payment_time)
    console.log(repayList.value);

  }).catch((error) => {
    console.log(error, '55555');

  })
}

function getRepaymentData() {
  repaymentData({
    user_id: JSON.parse(uni.getStorageSync('user')).userInfo.id,
  }).then((res) => {
    summaryData.value = res as { total: number, interest: number, principal: number }
  })
}

// 还款明细弹窗相关状态
const showRepaymentDetailModal = ref(false)

// 获取状态类型
function getStatusType(status: boolean) {
  switch (status) {
    case true:
      return 'success'
    case false:
      return 'warning'
  }
}

// 获取状态文本
function getStatusText(status: boolean) {
  switch (status) {
    case true:
      return '已支付'
    case false:
      return '待还款'
  }
}

// 还款相关状态
const repaymentPopup = ref()
// 在 script setup 中修改数据定义
const showRepaymentModal = ref(false)
const currentRepaymentItem = ref(null)
const repaymentVoucher = ref('')
const submitting = ref(false)

// 修改方法 - 将函数重命名
function openRepaymentModal(item) {
  currentRepaymentItem.value = item
  showRepaymentModal.value = true
}

function closeRepaymentModal() {
  showRepaymentModal.value = false
  currentRepaymentItem.value = null
  repaymentVoucher.value = ''
  submitting.value = false
}

function onUploadSuccess(url) {
  repaymentVoucher.value = url
}

async function submitRepayment() {
  if (!repaymentVoucher.value || submitting.value)
    return

  try {
    submitting.value = true
    await repayment(currentRepaymentItem.value.schedule_id, {
      repayment_voucher: repaymentVoucher.value,
    })
    uni.showToast({
      title: '还款凭证提交成功',
      icon: 'success',
    })

    closeRepaymentModal()
    // 刷新列表
    getOrderList()
  }
  catch (error) {
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'error',
    })
  }
  finally {
    submitting.value = false
  }
}

// 获取还款记录并显示弹窗
function getRepaymentList(id) {
  getRepayment(id, repaymentQuery).then((res) => {
    console.log(res, '5555')
    repaymentList.value = res.list || []
    console.log(repaymentList.value, '5555')
    showRepaymentDetailModal.value = true
  })
}

// 打开还款详情弹窗
function openRepaymentDetailModal() {
  showRepaymentDetailModal.value = true
}

// 关闭还款明细弹窗
function closeRepaymentDetailModal() {
  showRepaymentDetailModal.value = false
}

// 新增actived方法并暴露给父组件
function actived() {
  console.log(',,,,,,ooo')
  userTel.value = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).userInfo.telephone : ''
  isCs.value = !userTel.value || userTel.value == '18373481952'
  getRepaymentData()
  getOrderList()
}

// 暴露方法给父组件
defineExpose({
  actived,
})
</script>

<template>
  <view class="financial-page">
    <!-- 顶部金额卡片 - 上下布局 -->
    <view class="amount-card" v-if="!isCs">
      <!-- 主要金额区域 -->
      <view class="main-amount-section">
        <text class="main-amount-value">¥{{ formatAmount(summaryData.total) }}</text>
        <text class="main-amount-label">待还配资</text>
      </view>

      <!-- 明细区域 -->
      <view class="breakdown-section">
        <view class="breakdown-item">
          <!-- <view class="breakdown-dot interest-dot"></view> -->
          <view class="breakdown-info">
            <text class="breakdown-value">¥{{ formatAmount(summaryData.interest) }}</text>
            <text class="breakdown-label">配资息额</text>
          </view>
        </view>

        <view class="breakdown-item">
          <!-- <view class="breakdown-dot principal-dot"></view> -->
          <view class="breakdown-info">
            <text class="breakdown-value">¥{{ formatAmount(summaryData.principal) }}</text>
            <text class="breakdown-label">总配资</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的待审核借款 -->
    <view v-if="loanList.length" class="section">
      <view class="section-header">
        <text class="section-title">待审核配资（共{{ loanList.length }}笔）</text>
        <!-- <view class="more-section">
          <text class="more-text">更多</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view> -->
      </view>

      <!-- 保持原有的第25-69行代码不变 -->
      <view v-for="item in loanList" :key="item.id" class="loan-item">
        <!-- 用户信息 -->
        <view class="user-info">
          <view class="user-header">
            <view class="user-name-section">
              <text class="user-name">{{ item.user_name }}</text>
              <text class="user-name">{{ item.user_telephone }}</text>
              <text class="user-name">{{ item.city }}{{ item.role }}</text>
            </view>
          </view>
        </view>

        <!-- 配资信息 -->
        <view class="loan-info flex items-center justify-between">
          <view>
            <view class="loan-row">
              <text class="label">借款：</text>
              <text class="amount">{{ formatAmount(item.principal) }}</text>
            </view>
            <view class="loan-row">
              <text class="label">用途：</text>
              <text class="amount">{{ item.product_name }}</text>
              <text class="amount">{{ item.installment_periods }}期</text>
              <text class="amount">{{ getRepaymentMethodText[item.repayment_method] }}</text>
            </view>
            <!-- 运营长审核备注 -->
            <view v-if="item.loan_remark" class="loan-row">
              <text class="label">运营长审核备注：</text>
              <text class="amount">{{ item.loan_remark }}</text>
            </view>
            <!-- 财务审核备注 -->
            <view v-if="item.finance_remark" class="loan-row">
              <text class="label">财务审核备注：</text>
              <text class="amount">{{ item.finance_remark }}</text>
            </view>
          </view>
        </view>
        <!-- 步骤条 -->
        <view class="step-wrapper">
          <view class="custom-steps">
            <view class="step-container">
              <view v-for="(step, index) in stepList" :key="index" class="step-item" :class="{
                completed: index < getCurrentStep(item) && getCurrentStep(item) > 0,
                rejected: (getCurrentStep(item) === -1 && index === 0) || (getCurrentStep(item) === -2 && index === 1),
              }">
                <view class="step-dot" />
                <text class="step-title">{{ step.title }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 我要还款 -->
    <view v-for="item in repayList" :key="item.id" class="section">
      <view class="section-header">
        <text class="section-title">{{ item.order_id }}</text>
        <view class="more-section text-[#999]" @click="getRepaymentList(item.id)">
          <text class="more-text">明细</text>
          <uni-icons type="right" size="14" color="#999" />
        </view>
      </view>
      <view class="repayment-card">
        <view class="repayment-header">
          <!-- <text class="loan-number">本轻盈 - 15874433456 长沙</text> -->
          <text class="loan-id">{{ item.product_name || '暂无产品名称' }}</text>
          <text v-if="item.account_bank_user" class="loan-id">
            回款账户：
            {{ item.account_bank_user }}-{{ item.account_bank_name }}-{{ item.account_bank_no }}
          </text>
          <view class="loan-amount-info">
            <text class="loan-amount-label">配资金额：</text>
            <text class="loan-amount-value">¥{{ formatAmount(item.principal) }}（{{ item.annual_interest_rate }}%）</text>
          </view>
        </view>

        <!-- 已还完状态显示 -->
        <view v-if="item.is_finished === 1" class="completed-status">
          <view class="completed-badge">
            <text class="completed-text">✓ 已还完</text>
          </view>
          <view class="completion-info">
            <text class="completion-text">恭喜！该笔配资已全部还清</text>
            <text class="total-periods">共{{ item.installment_periods }}期</text>
          </view>
        </view>

        <!-- 未还完状态显示（原有逻辑） -->
        <template v-else>
          <!-- 当期还款信息 -->
          <view class="current-repayment-info" :class="{ overdue: item.is_due }">
            <view class="current-period">
              <text class="period-label">当期还款</text>
              <text class="period-value">第{{ item.period }}期 / 共{{ item.installment_periods }}期</text>
            </view>
            <view class="due-date-info">
              <text class="due-label">当期还款时间</text>
              <text class="due-value" :class="{ 'overdue-date': item.is_due }">{{ item.repayment_date }}</text>
            </view>
          </view>

          <!-- 当期应还明细 -->
          <view class="repayment-details">
            <view class="detail-title">
              <text class="title-text">当期应还明细</text>
            </view>
            <view class="detail-items">
              <view class="detail-item">
                <view class="item-left">
                  <view class="item-dot principal-dot" />
                  <text class="item-label">本金</text>
                </view>
                <text class="item-amount">¥{{ formatAmount(item.monthly_principal) }}</text>
              </view>
              <view class="detail-item">
                <view class="item-left">
                  <view class="item-dot interest-dot" />
                  <text class="item-label">利息</text>
                </view>
                <text class="item-amount">¥{{ formatAmount(item.monthly_interest) }}</text>
              </view>
              <view class="detail-item total-item">
                <view class="item-left">
                  <text class="item-label total-label">本期应还总额</text>
                </view>
                <text class="item-amount total-amount">¥{{ formatAmount(item.repayment_amount) }}</text>
              </view>
            </view>
          </view>

          <!-- 剩余还款信息 -->
          <view class="remaining-info">
            <view class="remaining-title">
              <text class="title-text">剩余还款信息</text>
            </view>
            <view class="remaining-items">
              <view class="remaining-item">
                <text class="remaining-label">剩余本金</text>
                <text class="remaining-value">¥{{ formatAmount(item.left_principal) }}</text>
              </view>
              <view class="remaining-item">
                <text class="remaining-label">剩余利息</text>
                <text class="remaining-value">¥{{ formatAmount(item.left_interest) }}</text>
              </view>
              <view class="remaining-item total-remaining">
                <text class="remaining-label total-label">剩余总额</text>
                <text class="remaining-value total-value">¥{{ formatAmount(item.total_repayment_amount) }}</text>
              </view>
            </view>
          </view>

          <view class="repay-button" :class="{ 'overdue-button': item.is_due }" @click="openRepaymentModal(item)">
            <text class="repay-text">{{ item.is_due ? '逾期还款' : '立即还款' }}</text>
          </view>
        </template>
      </view>
    </view>
    <wd-status-tip v-if="!repayList.length && !loanList.length" image="content" tip="暂无数据" />

    <!-- 查看已结清配资 -->
    <!-- <view class="settled-loans">
      <text class="settled-text">查看已结清配资</text>
      <uni-icons type="right" size="16" color="#999"></uni-icons>
    </view> -->

    <!-- 还款详情弹窗 -->
    <wd-popup v-model="showRepaymentDetailModal" position="bottom" height="80%">
      <view class="repayment-detail-popup">
        <view class="popup-header">
          <text class="popup-title">还款详情</text>
          <wd-icon name="close" class="close-icon" @click="closeRepaymentDetailModal" />
        </view>
        <view class="table-container">
          <!-- 当有数据时显示表格 -->
          <wd-table v-if="repaymentList.length" :data="repaymentList" :height="400" stripe border>
            <wd-table-col prop="period" label="期数" width="50" />
            <wd-table-col prop="repayment_date" label="还款日期" width="100" />
            <wd-table-col prop="is_pay" label="还款状态" width="100">
              <template #value="{ row }">
                <wd-tag :type="getStatusType(row.is_pay)">
                  {{ getStatusText(row.is_pay) }}
                </wd-tag>
                <view>{{ row.actual_repayment_time ? row.actual_repayment_time.split(' ')[0] : '' }}</view>
              </template>
            </wd-table-col>
            <wd-table-col prop="finance_confirm" label="财务确认" width="100">
              <template #value="{ row }">
                <wd-tag :type="row.finance_confirm ? 'success' : 'warning'">
                  {{ row.finance_confirm ? '已确认' : '待确认' }}
                </wd-tag>
                <view> {{ row.finance_confirm_time ? row.finance_confirm_time.split(' ')[0] : '' }}</view>
              </template>
            </wd-table-col>
            <wd-table-col prop="principal" label="应还" width="120">
              <template #value="{ row }">
                <view>本金：{{ row.principal }}</view>
                <view>利息：{{ row.interest }}</view>
                <view>总额：{{ row.repayment_amount }}</view>
              </template>
            </wd-table-col>
          </wd-table>

          <!-- 当没有数据时显示暂无数据 -->
          <wd-status-tip v-else image="content" tip="暂无数据" />
        </view>
      </view>
    </wd-popup>

    <!-- 还款凭证上传弹窗 -->
    <wd-popup v-model="showRepaymentModal" position="center" custom-style="border-radius: 20rpx; width: 85vw;" closable
      @close="closeRepaymentModal">
      <view class="repayment-modal">
        <view class="modal-header">
          <text class="modal-title">上传还款凭证</text>
        </view>

        <view class="modal-content">
          <view class="repayment-info">
            <text class="info-text">还款金额：¥{{ formatAmount(currentRepaymentItem?.repayment_amount || 0) }}</text>
            <text class="info-text">还款期数：第{{ currentRepaymentItem?.period }}期</text>
          </view>

          <view class="upload-section">
            <text class="upload-label">请上传还款凭证</text>
            <ImageUpload v-model="repaymentVoucher" upload-text="上传凭证" upload-hint="请上传转账截图或银行回单" icon-type="image"
              @success="onUploadSuccess" />
          </view>
        </view>

        <view class="modal-footer">
          <view class="btn-group">
            <view class="cancel-btn" @click="closeRepaymentModal">
              <text class="cancel-text">取消</text>
            </view>
            <view class="confirm-btn" :class="{ disabled: !repaymentVoucher || submitting }" @click="submitRepayment">
              <text class="confirm-text">{{ submitting ? '提交中...' : '确认提交' }}</text>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
.financial-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

// 顶部金额卡片 - 完整样式组
.amount-card {
  background: linear-gradient(135deg, #ff770d 0%, #ff9a3d 100%);
  margin: 24rpx;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 119, 13, 0.2);
  position: relative;
  overflow: hidden;

  // 添加装饰性背景元素
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200rpx;
    height: 200rpx;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }

  // 主要金额区域
  .main-amount-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32rpx;
    position: relative;
    z-index: 2;

    .main-amount-value {
      font-size: 48rpx;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
      letter-spacing: 1rpx;
    }

    .main-amount-label {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
      letter-spacing: 0.5rpx;
    }
  }

  // 明细区域
  .breakdown-section {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 24rpx;
    position: relative;
    z-index: 2;

    .breakdown-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 16rpx;
      padding: 20rpx 16rpx;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2rpx);
        background: rgba(255, 255, 255, 0.25);
      }

      .breakdown-dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        margin-bottom: 12rpx;
        flex-shrink: 0;

        &.interest-dot {
          background-color: #ffe4cc;
          box-shadow: 0 0 8rpx rgba(255, 228, 204, 0.6);
        }

        &.principal-dot {
          background-color: #fff2e6;
          box-shadow: 0 0 8rpx rgba(255, 242, 230, 0.6);
        }
      }

      .breakdown-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        .breakdown-value {
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          margin-bottom: 4rpx;
          text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
        }

        .breakdown-label {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.85);
          font-weight: 500;
        }
      }
    }
  }
}

// 区块样式组
.section {
  margin: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .more-section {
      .more-text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

// 配资项目样式组
.loan-item {
  padding: 32rpx;
  border-bottom: 2rpx solid #f0f0f0;

  .user-info {
    margin-bottom: 24rpx;

    .user-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .user-name-section {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16rpx;
        flex-wrap: wrap;

        .user-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }

  .loan-info {
    margin-bottom: 24rpx;

    .loan-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      gap: 16rpx;
      flex-wrap: wrap;

      .label {
        font-size: 28rpx;
        color: #666;
        min-width: 80rpx;
      }

      .amount {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
  }

  .action-button {
    background-color: #fb953b;
    border-radius: 32rpx;
    padding: 12rpx 24rpx;
    min-width: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

// 步骤条样式组
.step-wrapper {
  .custom-steps {
    width: 100%;

    .step-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 16rpx;
        left: 32rpx;
        right: 32rpx;
        height: 2rpx;
        background: none;
        border-top: 2rpx dashed #e0e0e0;
        z-index: 1;
      }

      .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        flex: 1;

        &.completed {
          .step-dot {
            background-color: #fb953b;
          }
        }

        &.rejected {
          .step-dot {
            background-color: #ff4757;
          }

          .step-title {
            color: #ff4757;
          }
        }

        .step-dot {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          background-color: #e0e0e0;
          margin-bottom: 12rpx;
          transition: all 0.3s ease;
        }

        .step-title {
          font-size: 24rpx;
          color: #999;
          text-align: center;
          line-height: 1.2;
          max-width: 120rpx;
        }
      }
    }
  }
}

// 还款卡片样式组
.repayment-card {
  padding: 32rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding-top: 20rpx;

  .repayment-header {
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .loan-number {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }

    .loan-id {
      font-size: 28rpx;
      // color: #999;
      display: block;
      margin-bottom: 8rpx;
    }

    // 添加配资金额样式
    .loan-amount-info {
      display: flex;
      align-items: center;
      margin-top: 8rpx;

      .loan-amount-label {
        font-size: 26rpx;
        // color: #666;
        margin-right: 8rpx;
      }

      .loan-amount-value {
        font-size: 30rpx;
        font-weight: 600;
        color: #ff6b35;
      }
    }
  }

  // 当期还款信息
  .current-repayment-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;
    padding: 20rpx;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-radius: 12rpx;
    border-left: 4rpx solid #4285f4;
    position: relative;

    // 逾期状态样式
    &.overdue {
      background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
      border-left: 4rpx solid #ff4757;

      .period-value,
      .due-value {
        color: #ff4757;
      }
    }

    .current-period,
    .due-date-info {
      display: flex;
      flex-direction: column;
      align-items: center;

      .period-label,
      .due-label {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 6rpx;
      }

      .period-value,
      .due-value {
        font-size: 28rpx;
        font-weight: 600;
        color: #4285f4;
        transition: color 0.3s ease;

        &.overdue-date {
          color: #ff4757;
          animation: pulse 2s infinite;
        }
      }
    }
  }

  // 当期应还明细
  .repayment-details {
    margin-bottom: 24rpx;

    .detail-title {
      margin-bottom: 16rpx;

      .title-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .detail-items {
      background: #fafafa;
      border-radius: 12rpx;
      padding: 20rpx;

      .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        &.total-item {
          padding-top: 16rpx;
          border-top: 1rpx solid #e0e0e0;
          margin-top: 8rpx;
        }

        .item-left {
          display: flex;
          align-items: center;

          .item-dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            margin-right: 12rpx;

            &.principal-dot {
              background-color: #4285f4;
            }

            &.interest-dot {
              background-color: #ff9500;
            }
          }

          .item-label {
            font-size: 26rpx;
            color: #666;

            &.total-label {
              font-weight: 600;
              color: #333;
            }
          }
        }

        .item-amount {
          font-size: 26rpx;
          font-weight: 600;
          color: #333;

          &.total-amount {
            font-size: 30rpx;
            color: #ff6b35;
          }
        }
      }
    }
  }

  // 剩余还款信息
  .remaining-info {
    margin-bottom: 24rpx;

    .remaining-title {
      margin-bottom: 16rpx;

      .title-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .remaining-items {
      background: linear-gradient(135deg, #fff8f0 0%, #fff2e6 100%);
      border-radius: 12rpx;
      padding: 20rpx;
      border: 1rpx solid #ffe4cc;

      .remaining-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        &:last-child {
          margin-bottom: 0;
        }

        &.total-remaining {
          padding-top: 12rpx;
          border-top: 1rpx solid #ffe4cc;
          margin-top: 8rpx;
        }

        .remaining-label {
          font-size: 26rpx;
          color: #666;

          &.total-label {
            font-weight: 600;
            color: #333;
          }
        }

        .remaining-value {
          font-size: 26rpx;
          font-weight: 600;
          color: #ff9500;

          &.total-value {
            font-size: 30rpx;
            color: #ff6b35;
          }
        }
      }
    }
  }

  .progress-container {
    margin-bottom: 32rpx;

    .progress-bar {
      height: 8rpx;
      background-color: #f0f0f0;
      border-radius: 4rpx;
      margin-bottom: 12rpx;
      position: relative;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff770d 0%, #e6690b 100%);
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }

    .progress-info {
      text-align: center;

      .progress-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .repay-button {
    background: linear-gradient(135deg, #ff9500 0%, #ff6b35 100%);
    border-radius: 12rpx;
    padding: 24rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.3);
    transition: all 0.3s ease;

    // 逾期还款按钮样式
    &.overdue-button {
      background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
      box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.4);
      animation: shake 0.5s ease-in-out;

      .repay-text {
        color: #fff;
        font-weight: 700;
        letter-spacing: 1rpx;
      }
    }

    .repay-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      transition: all 0.3s ease;
    }

    &:active {
      transform: translateY(1rpx);
    }
  }

  // 动画效果
  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }
  }

  @keyframes shake {

    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-2rpx);
    }

    75% {
      transform: translateX(2rpx);
    }
  }
}

// 已结清配资样式组
.settled-loans {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;

  .settled-text {
    font-size: 32rpx;
    color: #333;
  }

  .arrow {
    font-size: 32rpx;
    color: #999;
  }
}

// 还款凭证弹窗样式
.repayment-modal {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  max-height: 80vh;

  .modal-header {
    padding: 40rpx 32rpx 20rpx;
    text-align: center;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;

    .modal-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      letter-spacing: 1rpx;
    }

    .close-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
      }
    }
  }

  .modal-content {
    padding: 32rpx;

    .repayment-info {
      background: linear-gradient(135deg, #fff8f0 0%, #fff2e6 100%);
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 32rpx;
      border: 1rpx solid #ffe4cc;

      .info-text {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 12rpx;
        font-weight: 500;

        &:last-child {
          margin-bottom: 0;
        }

        &:first-child {
          color: #ff6b35;
          font-weight: 600;
          font-size: 30rpx;
        }
      }
    }

    .upload-section {
      .upload-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 20rpx;
        text-align: center;
      }
    }
  }

  .modal-footer {
    padding: 0 32rpx 32rpx;

    .btn-group {
      display: flex;
      gap: 20rpx;

      .cancel-btn,
      .confirm-btn {
        flex: 1;
        padding: 28rpx 20rpx;
        border-radius: 48rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        transition: all 0.3s ease;

        &:active {
          transform: translateY(1rpx);
        }
      }

      .cancel-btn {
        background: #f5f5f5;
        border: 1rpx solid #e0e0e0;

        .cancel-text {
          color: #666;
        }

        &:active {
          background: #ebebeb;
        }
      }

      .confirm-btn {
        background: linear-gradient(135deg, #ff9500 0%, #ff6b35 100%);
        box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.3);

        .confirm-text {
          color: #fff;
        }

        &.disabled {
          background: #ccc;
          box-shadow: none;

          .confirm-text {
            color: #999;
          }
        }

        &:active:not(.disabled) {
          box-shadow: 0 2rpx 8rpx rgba(255, 149, 0, 0.3);
        }
      }
    }
  }
}

// 还款详情弹窗样式
.repayment-detail-popup {
  padding: 20rpx;
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 20rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .close-icon {
      font-size: 40rpx;
      color: #999;
    }
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
  }
}

// 已还完状态样式
.completed-status {
  text-align: center;
  padding: 40rpx 20rpx;

  .completed-badge {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    border-radius: 50rpx;
    padding: 16rpx 32rpx;
    display: inline-block;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);

    .completed-text {
      font-size: 28rpx;
      color: #fff;
      font-weight: 600;
      letter-spacing: 1rpx;
    }
  }

  .completion-info {
    .completion-text {
      display: block;
      font-size: 26rpx;
      color: #52c41a;
      font-weight: 500;
      margin-bottom: 8rpx;
    }

    .total-periods {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
